<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>js版扫雷(html)</title>
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="debug"><pre></pre></div>
<div id="panel">
 <ul>
 
 </ul>

</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.8"></script>    
<script type="text/javascript" src="js/jquery.plugs.js"></script>    
<script type="text/javascript">
// y第几行  x：第几列
var max_y=10;
var max_x=10;
var mine_num=0;//地雷个数
var $panel=$('#panel');
var a=[];
$panel.width(max_x*(30+1));
build();
function build(){
    var x,y;
    for(y=0;y<max_y;y++){
        a[y]=[];
        for(x=0;x<max_x;x++){
            a[y][x]={'v':Math.random()>0.9?-1:0,'open':false};
        }
    }
    var html='';
    for(y=0;y<max_y;y++){
        for(x=0;x<max_x;x++){
            if(a[y][x]['v']==0){
                a[y][x]['v']=get_num(a,x,y);
            }    
            html+='<li id="b'+(y*max_x+x)+'" x="'+x+'" y="'+y+'">'+a[y][x]['v']+'</li>';
        }
    }
    $panel.find('ul').html(html);
    console.log(a);
}     
function get_num(a,x,y){
    var num=0;
    for(y1=y-1;y1<y+2;y1++){
        for(x1=x-1;x1<x+2;x1++){
            if(y1>=0 && y1<max_y && x1>=0 && x1<max_x ){
                if(a[y1][x1]['v']==-1)
                    num++;
            }
    
        } 
    
    }
    return num

}
$panel.find('li').click(function(){
    $self=$(this);
    var s_x=parseInt($(this).attr('x'));
    var s_y=parseInt($(this).attr('y'));
    var v=a[s_y][s_x]['v'];
    if(v==-1){
        alert('bang! game over');
        return ;
    }
    if(v>=0){
        setOpen(s_x,s_y);
        if(v==0){
            explorer(s_x,s_y);
        }    
    }

});
$panel.find('li').rightClick(function(self){
    bug('right click');
    $(self).addClass('tagged');

});
function set_open(index,x,y){
    $('#b'+index).addClass('open');
    //左侧
    for(i=x;i>=0;i--){
        _index=(y*max_x+i);
        if(a[y][i]>0){
            break;
        }
        $('#b'+_index).addClass('open');    
    }
    //右侧侧
    for(i=x;i<max_x;i++){
        _index=(y*max_x+i);
        if(a[y][i]>0){
            break;
        }
        $('#b'+_index).addClass('open');    
    }
    
}
function explorer(x,y){
    bug('EE:'+ y +':'+x);
            
            
    var xy=[[y,x-1],[y,x+1],[y-1,x],[y+1,x]];//上下左右四个方向的坐标
    var _x,_y,_block;
    for(i in xy){
        _x=xy[i][1];
        _y=xy[i][0];  
        bug(_y+' '+_x)
        if(_x<0 || _x>=max_x || _y<0 || _y>=max_y){//若超出边界则不再检查
            continue;
        }
        _block=a[_y][_x];
       try{
            if(_block['open']==false && _block['v']>=0){
                setOpen(_x,_y);
                if(_block['v']==0){
                    //explorer(_x,_y); 
                    setTimeout('explorer('+_x+','+_y+')',300);
                }
            } 
        }catch(e){
            console.log(e);
            bug('xx:'+ _y +':'+_x);
        }
    }
}
function setOpen(x,y){
    a[y][x].open=true;
    _index=(y*max_x+x);
    $('#b'+_index).addClass('open');    


}
function bug(msg){
    console.log(msg);
    $('#debug pre').append(msg+"\n");
    $('#debug').scrollTop($('#debug pre').innerHeight());
}
</script>
    
</body>
</html>